<template>
	<view class="calendar">
		<view class="days">
			<view class="day" v-for="(day, index) in daysOfWeek" :key="index">{{ day }}</view>
			<view class="date" v-for="(date, index) in dates" :key="index"
				:class="{ 'highlight': isHighlighted(date) }">
				<text>{{ date }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
				dates: [],
				highlightedDates: [5], // 这里定义需要标的日期
			};
		},
		computed: {
			monthName() {
				return this.currentDate.toLocaleString('default', {
					month: 'long'
				});
			},
			year() {
				return this.currentDate.getFullYear();
			},
		},
		methods: {
			prevMonth() {
				const month = this.currentDate.getMonth() - 1;
				this.currentDate.setMonth(month);
				this.generateDates();
			},
			nextMonth() {
				const month = this.currentDate.getMonth() + 1;
				this.currentDate.setMonth(month);
				this.generateDates();
			},
			generateDates() {
				const year = this.currentDate.getFullYear();
				const month = this.currentDate.getMonth();
				const firstDay = new Date(year, month, 1);
				const lastDay = new Date(year, month + 1, 0);

				// 清空日期数组
				this.dates = [];

				// 填充前面的空白天数
				for (let i = 0; i < firstDay.getDay(); i++) {
					this.dates.push('');
				}

				// 填充当前月份的日期
				for (let i = 1; i <= lastDay.getDate(); i++) {
					this.dates.push(i);
				}
			},
			isHighlighted(date) {
				return this.highlightedDates.includes(date);
			},
		},
		mounted() {
			this.generateDates();
		},
	};
</script>

<style scoped>
	.calendar {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 10px;
	}

	.month {
		font-size: 20px;
	}

	.navigation button {
		margin: 0 5px;
	}

	.days {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		width: 100%;
	}

	.day,
	.date {
		text-align: center;
		padding: 10px;
	}

	.day {
		font-weight: bold;
	}

	.date {
		border: 1px solid #ddd;
	}

	.highlight {
		background-color: #39b54a;
		color: white;
		/* 标记 */
		font-weight: bold;
		/* 可选：加粗显示 */
	}
</style>